<template>
  <div class="split-layout">
    <el-card class="acceleration-group">
      <template #header>
        <div>加速选项</div>
      </template>
      <el-select v-model="acceleration" class="acceleration-combo">
        <el-option label="不使用加速" value="none"></el-option>
        <el-option label="-c:v h264_qsv -qscale 15" value="h264_qsv"></el-option>
        <el-option label="-c:v h264_amf -qscale 15" value="h264_amf"></el-option>
        <el-option label="-c:v h264_nvenc -qscale 15" value="h264_nvenc"></el-option>
        <el-option label="-c:v h264_videotoolbox -qscale 15" value="h264_videotoolbox"></el-option>
        <el-option label="-c:v hevc_qsv -qscale 15" value="hevc_qsv"></el-option>
        <el-option label="-c:v hevc_amf -qscale 15" value="hevc_amf"></el-option>
        <el-option label="-c:v hevc_nvenc -qscale 15" value="hevc_nvenc"></el-option>
        <el-option label="-c:v hevc_videotoolbox -qscale 15" value="hevc_videotoolbox"></el-option>
      </el-select>
    </el-card>

    <el-card class="time-split-group">
      <template #header>
        <div>根据时长分割</div>
      </template>
      <el-form label-width="100px">
        <el-form-item label="输入文件:">
          <el-input v-model="timeInputFile"></el-input>
          <el-button @click="selectTimeInputFile">
            <el-icon><Document /></el-icon>
          </el-button>
        </el-form-item>

        <el-form-item label="输出目录:">
          <el-input v-model="timeOutputDir"></el-input>
          <el-button @click="selectTimeOutputDir">
            <el-icon><Folder /></el-icon>
          </el-button>
        </el-form-item>

        <el-form-item label="时长(秒):">
          <el-input v-model="duration"></el-input>
        </el-form-item>

        <el-form-item>
          <el-checkbox v-model="useTimeRange">指定时间:</el-checkbox>
          <div class="time-range" v-if="useTimeRange">
            <span>开始:</span>
            <el-input v-model="timeStart"></el-input>
            <span>结束:</span>
            <el-input v-model="timeEnd"></el-input>
          </div>
        </el-form-item>

        <el-button type="primary" @click="runTimeSplit">运行</el-button>
      </el-form>
    </el-card>

    <el-card class="size-split-group">
      <template #header>
        <div>根据大小分割</div>
      </template>
      <el-form label-width="100px">
        <el-form-item label="输入文件:">
          <el-input v-model="sizeInputFile"></el-input>
          <el-button @click="selectSizeInputFile">
            <el-icon><Document /></el-icon>
          </el-button>
        </el-form-item>

        <el-form-item label="输出目录:">
          <el-input v-model="sizeOutputDir"></el-input>
          <el-button @click="selectSizeOutputDir">
            <el-icon><Folder /></el-icon>
          </el-button>
        </el-form-item>

        <el-form-item label="大小(MB):">
          <el-input v-model="splitSize"></el-input>
        </el-form-item>

        <el-form-item>
          <el-checkbox v-model="useSizeRange">指定时间:</el-checkbox>
          <div class="size-range" v-if="useSizeRange">
            <span>开始:</span>
            <el-input v-model="sizeStart"></el-input>
            <span>结束:</span>
            <el-input v-model="sizeEnd"></el-input>
          </div>
        </el-form-item>

        <el-button type="primary" @click="runSizeSplit">运行</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from 'vue';
import { Folder, Document } from "@element-plus/icons-vue";
import { SelectDirectory, SelectFile } from "../../../wailsjs/go/main/App";
import { ElMessage } from 'element-plus';

export default {
  name: "SplitTab",
  components: {
    Folder,
    Document
  },
  setup() {
    const state = reactive({
      acceleration: "none",
      timeInputFile: "",
      timeOutputDir: "",
      duration: "",
      useTimeRange: false,
      timeStart: "",
      timeEnd: "",
      sizeInputFile: "",
      sizeOutputDir: "",
      splitSize: "",
      useSizeRange: false,
      sizeStart: "",
      sizeEnd: ""
    });

    const selectTimeInputFile = async () => {
      try {
        SelectFile().then((result) => {
          state.timeInputFile = result;
        });
      } catch (err) {
        console.error("选择文件失败:", err);
      }
    };

    const selectTimeOutputDir = async () => {
      try {
        SelectDirectory().then((result) => {
          state.timeOutputDir = result;
        });
      } catch (err) {
        console.error("选择输出目录失败:", err);
      }
    };

    const runTimeSplit = () => {
      // 实现按时长分割的逻辑
      console.log("运行按时长分割");
      // 这里添加实际的分割逻辑
    };

    const selectSizeInputFile = async () => {
      try {
        SelectFile().then((result) => {
          state.sizeInputFile = result;
        });
      } catch (err) {
        console.error("选择文件失败:", err);
      }
    };

    const selectSizeOutputDir = async () => {
      try {
        SelectDirectory().then((result) => {
          state.sizeOutputDir = result;
        });
      } catch (err) {
        console.error("选择输出目录失败:", err);
      }
    };

    const runSizeSplit = () => {
      // 实现按大小分割的逻辑
      console.log("运行按大小分割");
      // 这里添加实际的分割逻辑
    };

    return {
      ...toRefs(state),
      selectTimeInputFile,
      selectTimeOutputDir,
      runTimeSplit,
      selectSizeInputFile,
      selectSizeOutputDir,
      runSizeSplit
    };
  }
};
</script>

<style scoped>
.split-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.acceleration-group, .time-split-group, .size-split-group {
  width: 100%;
}

.acceleration-combo {
  width: 100%;
}

.time-range, .size-range {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
</style>